<html>
	<head> 
		<title>My First Platformer</title>
	</head>
	<body onload="init()">
		<canvas id="canvas" width="800" height="400" style="background-color:#333333;"></canvas>
	</body>

	<script type="text/javascript" src="../box2d/Box2dWeb-2.1.a.3.min.js"></script>
	<script type="text/javascript">
		
	function init() {
		// define classes being used
		var 	b2Vec2 = Box2D.Common.Math.b2Vec2,
			b2AABB = Box2D.Collision.b2AABB,
			b2Body = Box2D.Dynamics.b2Body,
			b2BodyDef = Box2D.Dynamics.b2BodyDef,
			b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
			b2Fixture = Box2D.Dynamics.b2Fixture,
			b2World = Box2D.Dynamics.b2World,
			b2MassData = Box2D.Collision.Shapes.b2MassData,
			b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
			b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
			b2DebugDraw = Box2D.Dynamics.b2DebugDraw,
			b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef; 
		
		// constants

		var worldscale = 30.0;
		var canvas_x = 800;
		var canvas_y = 400;

		var world_width = 1000/worldscale;
		var world_height = 400/worldscale;

		// create world 
		var world = new b2World( 
			new b2Vec2(0,10),
			false
		);
		
		var bounds_fixDef = new b2FixtureDef; // fixture def for world walls
		bounds_fixDef.friction = 0.6;
		bounds_fixDef.density = 0.1;
		bounds_fixDef.restitution = 0.20;

		// create ground
		var bounds_bodyDef = new b2BodyDef; 

		bounds_bodyDef.type = b2Body.b2_staticBody;
		bounds_fixDef.shape = new b2PolygonShape;
		// ground
		bounds_fixDef.shape.SetAsBox(world_width,30/worldscale);
		bounds_bodyDef.position.Set( world_width/2, world_height);  
		world.CreateBody(bounds_bodyDef).CreateFixture(bounds_fixDef);
		// left end of world
		bounds_fixDef.shape.SetAsBox(30/worldscale, world_height);
		bounds_bodyDef.position.Set( 0, canvas_y/2/worldscale );  
		world.CreateBody(bounds_bodyDef).CreateFixture(bounds_fixDef);
		// right end of world
		bounds_bodyDef.position.Set( world_width, canvas_y/2/worldscale );  
		world.CreateBody(bounds_bodyDef).CreateFixture(bounds_fixDef);

		// create foating body
		bounds_fixDef.shape.SetAsBox(70/worldscale,20/worldscale);
		bounds_bodyDef.position.Set( world_width/2, canvas_y/2/worldscale );  
		world.CreateBody(bounds_bodyDef).CreateFixture(bounds_fixDef);
		
		// player definitions
		var fixDef = new b2FixtureDef;
		fixDef.friction = 0.6;
		fixDef.density = 4;
		fixDef.restitution = 0.4;

		var bodyDef = new b2BodyDef;
		bodyDef.type = b2Body.b2_dynamicBody;
		fixDef.shape = new b2PolygonShape;
		fixDef.shape.SetAsBox(10/worldscale,30/worldscale);
		bodyDef.position.x = canvas_x/2/worldscale;
		bodyDef.position.y = canvas_y/2/worldscale;
		
		var player = world.CreateBody(bodyDef);
		player.CreateFixture(fixDef);
		player.SetFixedRotation(true);


		var debugDraw = new b2DebugDraw();
			debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
			debugDraw.SetDrawScale(worldscale);
			debugDraw.SetLineThickness(1.0);
			debugDraw.SetFillAlpha(0.5);
			debugDraw.SetFlags( b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
			world.SetDebugDraw(debugDraw);
 

		var updateInterval = window.setInterval(update, 1000/100);

		var keys = [];
		document.addEventListener("keydown",function(e) {
			keys[e.keyCode] = true;
			if( keys[32] ) {
				if( updateInterval != null ) {
					clearInterval(updateInterval);
					updateInterval = null;
				} else {
					updateInterval = window.setInterval(update, 1000/60);
				}
			}
		});
		document.addEventListener("keyup",function(e) {
			keys[e.keyCode] = false;
		});

		var offsetX = 0;
		var lastX = null;
		var steps = 0;
		
		function update() {

			var isJump = false;

			
			var canvas = document.getElementById("canvas");	
			canvas.getContext("2d").clearRect( 
				-1 * world_width * worldscale,
				-1 * worldscale, 
				4 * world_width * worldscale,
				2 * world_height * worldscale);
			world.Step(1/100,10,10);
			world.DrawDebugData();
			world.ClearForces();



			// handle side-scroll
			steps += 0.001;
			if( lastX != null) {
				var x = player.GetPosition().x;
				var translateX = (lastX - x) * worldscale;
				offsetX += translateX;
				if( x > canvas_x/2/worldscale && x <= world_width - canvas_x/2/worldscale) {
					canvas.getContext("2d").translate(translateX,0);
				}
				lastX = x;
			}

			var max_velocity = 2;
			
			var force_mag = 25; 
			var force = new b2Vec2();

			
			var vel = player.GetLinearVelocity();
			if(keys[37]){ // left
				force.x = -1*force_mag; 
				lastX = player.GetPosition().x;
				steps=0;
			}
			if(keys[39]){ //right
				force.x = 1*force_mag;
				lastX = player.GetPosition().x;
				steps=0;
			}
			if(keys[38]){ //jump
				vel.y = -50/worldscale;
				isJump = true;
			}
			
			var opposite_force = new b2Vec2(0,0);
			opposite_force.x = -1 * force.x;
			
			player.ApplyForce(force, player.GetWorldCenter());
			player.SetLinearDamping(1.5);
			
			if( isJump )
				player.SetLinearVelocity(vel);	
			
			

		};

	};
	</script>
</html>
